<template>
  <div class="tags-container">
    <md-layout class="group" md-flex="100" :key="tags.type" v-for = "tags in tagsGroup">
      <md-layout md-flex="10"><md-chip>{{tags.type}}</md-chip></md-layout>
      <md-layout  md-gutter="4" md-flex-offset="30" md-align="end" md-flex="60">
        <md-layout md-align="start" :key="tag" v-for="tag in tags.tags">
          <md-chip>{{tag}}</md-chip>
        </md-layout>
      </md-layout>
    </md-layout>
  </div>
</template>

<script>
export default {
  props: ['tagsGroup'],
  created () {
    console.log(this.tagsGroup)
  }
}
</script>

<style scoped>
.tags-container {
  padding: 0 1rem;
}
.tags-container .group {
  margin-bottom: .54rem
}
.md-chip {
  margin-top: 4px;
}
</style>
